<template>
	<view class="content">
		<view class="header">
			<text class="title">神秘占卜屋</text>
			<text class="subtitle">揭开命运的神秘面纱</text>
		</view>

		<view class="fortune-cards">
			<view class="card" v-for="(item, index) in fortuneTypes" :key="index" @click="startFortune(item)">
				<image :src="item.icon" class="card-icon"></image>
				<text class="card-title">{{ item.title }}</text>
				<text class="card-desc">{{ item.description }}</text>
			</view>
		</view>

		<view class="developer-info">
			<text>开发者：</text>
			<text class="developer-link" @click="openDeveloperSite">坚果</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			fortuneTypes: [
				{
					title: '塔罗牌',
					description: '揭示你的命运轨迹',
					icon: '/static/tarot.png',
					type: 'tarot'
				},
				{
					title: '星座运势',
					description: '了解今日星座运程',
					icon: '/static/zodiac.png',
					type: 'zodiac'
				},
				{
					title: '姓名测算',
					description: '解读姓名中的天机',
					icon: '/static/name.png',
					type: 'name'
				},
				{
					title: '周公解梦',
					description: '揭秘梦境的玄机',
					icon: '/static/dream.png',
					type: 'dream'
				}
			]
		}
	},
	methods: {
		startFortune(item) {
			uni.navigateTo({
				url: `/pages/fortune/fortune?type=${item.type}`
			})
		},
		openDeveloperSite() {
			plus.runtime.openURL('https://www.nutpi.net/')
		}
	}
}
</script>

<style>
.content {
	padding: 40rpx;
	background: linear-gradient(135deg, #f6d365 0%, #fda085 100%);
	min-height: 100vh;
	max-width: 1200rpx;
	margin: 0 auto;
	box-sizing: border-box;
	position: relative;
	overflow: hidden;
}

.header {
	text-align: center;
	margin-bottom: 40rpx;
	padding: 20rpx;
	background: rgba(255, 255, 255, 0.8);
	border-radius: 20rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
}

.title {
	font-size: 48rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 20rpx;
}

@media screen and (min-width: 768px) {
	.content {
		padding: 60rpx;
	}

	.header {
		margin-bottom: 80rpx;
	}

	.title {
		font-size: 56rpx;
	}

	.subtitle {
		font-size: 32rpx;
	}

	.card-title {
		font-size: 36rpx;
	}

	.card-desc {
		font-size: 28rpx;
	}
}

.subtitle {
	font-size: 28rpx;
	color: #666;
	display: block;
}

.fortune-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300rpx, 1fr));
	gap: 40rpx;
	padding: 20rpx;
	max-width: 960rpx;
	margin: 0 auto;
}

.card {
	background: rgba(255, 255, 255, 0.9);
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
	transition: all 0.3s ease;
	cursor: pointer;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.card:active {
	transform: scale(0.98);
}

.card-icon {
	width: 100rpx;
	height: 100rpx;
	margin-bottom: 20rpx;
}

.card-title {
	font-size: 32rpx;
	color: #333;
	font-weight: bold;
	margin-bottom: 10rpx;
	display: block;
}

.card-desc {
	font-size: 24rpx;
	color: #666;
	display: block;
}

.developer-info {
	text-align: center;
	padding: 20rpx;
	margin-top: 40rpx;
	color: #666;
	font-size: 24rpx;
}

.developer-link {
	color: #007AFF;
	text-decoration: underline;
}
</style>
